<template>
    <!-- 顶端表格 -->
    <div style="margin-top:10px;">
        <el-row justify="space-between">
            <el-col :span="1">
                <el-button color="#626aef" @click="isShowAdd = true">添加药品</el-button>
            </el-col>
            <el-col :span="9">
                <el-input v-model="searchText" style="width: 240px" size="large" placeholder="输入名称" suffix-icon="Search"
                    @change="searchMedicine()" />
            </el-col>
        </el-row>
    </div>
    <el-row :gutter="20">
        <el-col :span="6" v-for="one, index in mdeicineList" :key="index">
            <el-card style="max-width: 450px;height: 300px;" shadow="hover">
                <template #header>
                    <div class="card-header">
                        <span>{{ one.name }}</span>
                    </div>
                </template>
                <div style="height: 130px;">
                    <p class="text item">描述：{{ one.description }}</p>
                    <p style="color: red;">剩余库存：{{ one.stockQuantity }}</p>
                    <p style="color: blue;">单价：{{ one.unitPrice }}元</p>
                </div>
                <template #footer>
                    <el-button type="primary" @click="updateOne(one)">编辑</el-button>
                    <el-button type="danger" @click="delOne(one.id)">删除</el-button>
                </template>
            </el-card>
        </el-col>
    </el-row>
    <!-- 药品修改 -->
    <el-dialog title="修改药品" v-model="isShowEdit" width="400px" center>
        <el-form :model="updataMedicine" label-width="80px">
            <el-form-item label="药品名称">
                <el-input v-model="updataMedicine.name"></el-input>
            </el-form-item>
            <el-form-item label="药品描述">
                <el-input v-model="updataMedicine.description"></el-input>
            </el-form-item>
            <el-form-item label="单价">
                <el-input-number :precision="2" :step="0.01" v-model="updataMedicine.unitPrice"/>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="updataMedicine.stockQuantity"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="updataOneCommit()">修改</el-button>
                <el-button @click="isShowEdit = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!-- 药品新增 -->
    <el-dialog title="新增药品" v-model="isShowAdd" width="400px" center>
        <el-form :model="addMedicine" label-width="80px">
            <el-form-item label="药品名称">
                <el-input v-model="addMedicine.name"></el-input>
            </el-form-item>
            <el-form-item label="药品描述">
                <el-input v-model="addMedicine.description"></el-input>
            </el-form-item>
            <el-form-item label="单价">
                <el-input-number :precision="2" :step="0.01" v-model="addMedicine.unitPrice"/>
            </el-form-item>
            <el-form-item label="库存">
                <el-input v-model="addMedicine.stockQuantity"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addMedicines()">新增</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-backtop :right="100" :bottom="100" />
</template>
<script>
import { medicineLists, medicineUpdata, medicineAdd,medicineDel } from '@/views/api';
import { ElMessage, ElMessageBox } from 'element-plus';
import { ref } from 'vue'



export default {
    data() {
        return {
            mdeicineList: [],
            updataMedicine: {},
            isShowEdit: ref(false),
            addMedicine: {},
            isShowAdd: ref(false),
            searchText: ref(''),
        }
    },
    methods: {
        getList() {
            medicineLists().then(res => {
                this.mdeicineList = res.data.data
            })
        },
        // 编辑数据
        updateOne(one) {
            console.log(one);
            // 浅拷贝数据
            this.updataMedicine = Object.assign({}, one);
            // 赋值修改数据
            this.isShowEdit = true;
        },
        // 修改药品
        updataOneCommit() {
            medicineUpdata({
                id: this.updataMedicine.id,
                name: this.updataMedicine.name,
                description: this.updataMedicine.description,
                unitPrice: this.updataMedicine.unitPrice,
                stockQuantity: this.updataMedicine.stockQuantity
            }).then(res => {
                if (res.data.data) {
                    this.isShowEdit = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '修改成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '修改失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 搜索药品
        searchMedicine() {
            medicineLists({
                name: this.searchText
            }).then(res => {
                if (res.data.data.length > 0) {
                    this.mdeicineList = res.data.data;
                } else {
                    ElMessage({
                        message: '查无此信息',
                        type: 'error'
                    })
                    this.getList();
                }
            })
        },
        // 添加
        addMedicines() {
            medicineAdd({
                name: this.addMedicine.name,
                description: this.addMedicine.description,
                unitPrice: this.addMedicine.unitPrice,
                stockQuantity: this.addMedicine.stockQuantity
            }).then(res => {
                if (res.data.data) {
                    this.isShowAdd = false;
                    setTimeout(2000)
                    ElMessageBox({
                        message: '添加成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                } else {
                    ElMessageBox({
                        message: '添加失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        },
        // 删除
        delOne(item){
            medicineDel({
                id:item
            }).then(res =>{
                if(res.data.data) {
                    ElMessageBox({
                        message: '删除成功',
                        type: 'success'
                    }).then(() => {
                        location.reload();
                    })
                }else{
                    ElMessageBox({
                        message: '删除失败',
                        type: 'error'
                    }).then(() => {
                        location.reload();
                    })
                }
            })
        }
    },
    mounted() {
        this.getList();
    },
}
</script>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
    margin-top: 10px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>